<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo-3</title>
</head>

<body>

  <div id="app">
    Hello !
  </div>

  <script>
    // 
    // vue3.0实现原理，基于 Proxy 实现的
    // 
    // 模拟 vue 中的 data 选项
    let data = {
      msg: '你好。',
      count: 11
    }

    // 模拟 vue 的实例
    let vm = new Proxy(data, {
      // 执行代理行为的函数
      // 当访问 vm 的成员会执行
      get(target, key) {
        console.log('get, key : ', key, target[key])
        return target[key]
      },
      // 当设置 vn 的成员会执行
      set(target, key, newVal) {
        console.log('set, key : ', key, newVal)
        if (target[key] === newVal) {
          return
        }
        target[key] = newVal
        // 数据更改，跟新 DOM 的值
        document.querySelector('#app').textContent = target[key]
      }
    })

    // 测试
    vm.msg = '你好，defineProperty !'
    console.log(vm.msg)

  </script>
</body>

</html>
